<template>
  <el-button @click="saveData('container_indentorMain')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheData('container_indentorMain')">清除缓存</el-button>
  <el-button plain @click="_PrintInfo=!_PrintInfo;console.log(_PrintInfo)">切换打印信息{{ _PrintInfo }}</el-button>

  <div id="container_indentorMain" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">


import {onMounted, ref} from "vue";

import {usePreviewStore} from "@/stores/modules/xzPreviewStore";

const usePreStore = usePreviewStore();
let _PrintInfo = ref(false);
const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  width: () => 1900,
  // width:()=>width
  // height:()=>height
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}


//主子表
import {
  get_onUpdateDatasetlist as get_onUpdateDatasetlist_indentor
} from "@/views/reportDesigner/indentor/get_onUpdateDatasetList";
//环比表
import {
  get_onUpdateDatasetlist as get_onUpdateDatasetList_qoq
} from "@/views/reportDesigner/qoq/get_onUpdateDatasetList_qoq";
//逐层累计表
import {
  get_onUpdateDatasetlist as get_onUpdateDatasetlist_accu_lbl
} from "@/views/reportDesigner/accumulate_LayerByLayer/get_onUpdateDatasetList_accu_lbl.js";
//交叉累计表
import {
  get_onUpdateDatasetlist as get_onUpdateDatasetlist_accu_cross
} from "@/views/reportDesigner/accumulate_cross/get_onUpdateDatasetList_accu_cross.js";

import {union_onUpdateDataSetList} from "@/utils/xzToolsUtil";


let results = [];
union_onUpdateDataSetList(get_onUpdateDatasetlist_indentor(), results);
union_onUpdateDataSetList(get_onUpdateDatasetList_qoq(), results);
union_onUpdateDataSetList(get_onUpdateDatasetlist_accu_lbl(), results);
union_onUpdateDataSetList(get_onUpdateDatasetlist_accu_cross(), results);

const onUpdateDatasetList = () => {
  return new Promise((resolve, reject) => {
    if (_PrintInfo) {
      console.log("....onUpdateDatasetList,", results)
      // resolve的数据格式，这里可以写副作用的‘远程获取数据’
      console.log(results);
    }
    resolve(results)  //这里暂时引用前面的    results
  })
}
options.onUpdateDatasetList = onUpdateDatasetList
const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#container_indentorMain", options);
  //sheetDesign.on("dataset-edited",on_dataset_edited);

})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
  usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data);
  console.log(config)
  console.log(data);
}

function cleanPiniaCacheData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);

}
</script>

<style scoped>

</style>
